<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20" :style="{background: 'url('+imgurl+') no-repeat','background-size': '100%'}">
        <shopro-navbar :isBack="false" :background="{background:'url('+imgurl+') no-repeat','background-size': '100%'}">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: left;padding-left: 20rpx;"
            >
            </text>
        </shopro-navbar>
        <!--        轮播图-->

        <view class="userinfo u-flex u-row-left u-col-center u-p-20 u-m-l-20 u-m-r-20">

            <view class="userimg u-m-r-20">
                <image :src="userInfo.avatar?userInfo.avatar:require('@/static/images/nomsg.png')" style="width: 120rpx;height: 120rpx;border-radius: 50%"></image>
            </view>
            <view class="u-flex u-flex-col u-row-left u-w-100s u-col-center">
                <view class="u-flex u-w-100s">
                    <view class="nickname u-m-r-10">{{userInfo.nickname?userInfo.nickname:''}}</view>
                </view>
                <view class="gongsi u-w-100s">{{userInfo.mobile?userInfo.mobile:''}}</view>
            </view>
        </view>
        <view class="u-flex u-flex-col u-m-t-20 kehu-item u-p-20 u-m-l-20 u-m-r-20" @click="jump('/pages-list/shenheList')">
            <view class="u-flex u-p-10 u-w-100s u-row-around top-kehu u-p-t-40 u-p-b-40">
                <view class="u-flex u-flex-col u-flex-1 u-row-left u-col-center" style="border-right: 1rpx solid #f8f8f8">
                    <view class="topnum">{{ userInfoTongji.today?userInfoTongji.today:"0" }}</view>
                    <view class="topname">今日审核</view>
                </view>
                <view class="u-flex u-flex-col u-flex-1 u-row-left u-col-center">
                    <view class="topnum">{{ userInfoTongji.total?userInfoTongji.total:"0" }}</view>
                    <view class="topname">总审核量</view>
                </view>

            </view>
        </view>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20">

            <!--            我的工作台-->
            <view class="u-flex u-col-center u-row-left u-w-100s u-h-100 u-m-b-10">
                <view class="u-m-l-14" style="font-size: 28rpx;font-weight:bold;">我的工具</view>
            </view>
            <view class="u-flex u-flex-col u-p-20 u-m-t-10 yuangong-item">
                <view class="u-flex u-p-10 u-w-100s top-yuangong u-p-b-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @tap="jump('/user/userxieyi')">
                        <view class="topnum">
                            <image style="width: 80rpx;height: 80rpx;" src="/static/images/user.png"></image>
                        </view>
                        <view class="topname">用户协议</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @tap="jump('/user/yinsi')">
                        <view class="topnum">
                            <image style="width: 80rpx;height: 80rpx;" src="/static/images/yinsi.png"></image>
                        </view>
                        <view class="topname">隐私协议</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="loginOut">
                        <view class="topnum">
                            <image style="width: 80rpx;height: 80rpx;" src="/static/images/tuichu.png"></image>
                        </view>
                        <view class="topname">退出</view>
                    </view>
                </view>
<!--                退出提示-->
                <shopro-tishi-popup ref="deletpopupAddress" @sure="logout()"></shopro-tishi-popup>

            </view>

        </view>
    </view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';
import { API_URL } from '@/env'
let IMG_URL_TOP = `${API_URL}/image/bg.png`;
export default {
    components: {},
    data() {
        return {
            userInfoTongji:{

            },
            imgurl:IMG_URL_TOP
        };
    },
    computed: {
        ...mapGetters(['isLogin','userInfo']),

    },
    onPullDownRefresh() {

    },

    onShow() {
        if(!this.isLogin){
            this.$store.dispatch("showAuthModal", "1233");
        }
        this.init()
    },
    onHide() {

    },
    onLoad() {
    },
    methods: {
        // 初始化
        init() {
            let that = this;
            that
                .$http(
                    "login.statistics",
                )
                .then(res => {
                    that.userInfoTongji = res.data;
                    console.log(res.data,"====",that.userInfoTongji)
                });

        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
        loginOut() {
            this.$refs.deletpopupAddress.$refs.deletpopup.open()
        },
        logout(){
            let that = this;
            that.$http('login.logout', {
            }).then(res => {
                if (res.code === 1) {
                    that.$u.toast('退出成功')
                }
            });
            this.$refs.deletpopupAddress.$refs.deletpopup.close()
            that.$store.dispatch("logout");
            that.$store.dispatch("showAuthModal", "1233");
        }
    }
};
</script>

<style lang="scss" scoped>
page {
    background: #f8f8f8;
}
.home-wrap{

    background-size: 100%;
}
.swipers {
    width: 100%;
    height: 450rpx;
}

.kehu-item {
    border-radius: 20rpx;

    .top-kehu {
        background: #FFFFFF;
        border-radius: 20rpx;

        .topnum {
            font-size: 38rpx;
            margin-bottom: 20rpx;
        }
    }
}

.yuangong-item {
    background: #FFFFFF;
    border-radius: 20rpx;
}

.baobiao-item {
    .time-day {
        width: 100rpx;
        background: #1989fa;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}

.top-yuangong {
    flex-wrap: wrap;
}

.top-yuangong > .list {
    width: 24%;
}

.top-yuangong > .list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}
.nickname{
    font-size: 30rpx;
    color: #fff;
    margin-bottom: 18rpx;
}
.gongsi{
    font-size: 28rpx;
    color:#fff;
}
</style>
